<template>
  <view style="padding: 48rpx 24rpx 24rpx 24rpx">
    <view>
      <view style="padding-bottom: 82rpx">
        <u-swiper
          :list="lunbo_list"
          keyName="picx"
          circular
          :loading="lunbo_loading"
          @click="lunbo_click"
          indicator
          indicatorMode="dot"
          :previousMargin="81"
          :nextMargin="81"
          height="251"
          imgMode="aspectFill"
          radius="8"
        ></u-swiper>
      </view>

      <!-- <view style="margin: 30rpx 30rpx 30rpx 30rpx;">
				<u-image :src="utoken==''?'/static/image/mkz_pic_index_xyhfl.png':'/static/image/mkz_ic_mine_vip_right.png'" width="100%" height="50px" radius="8" @click="toLogin"></u-image>
			</view> -->

      <!-- <u-grid :col="5" :border="false">
				<u-grid-item  v-for="(item,index) in grid_list" :key="index" @click="grid_click(index)">
					<u-icon :name="item.icon" :size="40"></u-icon>
					<view class="grid-text">{{item.name}}</view>
				</u-grid-item>
			</u-grid> -->
      <!-- <view style="display: flex; justify-content: space-between">
        <view
          class="item"
          style="background: #b2dfff; color: #5f90e9"
          @click="toUrl('/pages/ucenter/comment/comment')"
        >
          <view style="display: flex; align-items: center">
            <image
              style="width: 38rpx; height: 30rpx; margin-right: 14rpx"
              src="/static/image/msg.png"
              alt=""
            />
            <text>评论中心</text></view
          >
        </view>
        <view
          class="item"
          style="background: #fbd4bd; color: #744c35"
          @click="toUrl('/pages/ucenter/vip/vip')"
        >
          <view style="display: flex; align-items: center">
            <image
              style="width: 41rpx; height: 36rpx; margin-right: 10rpx"
              src="/static/image/vip.png"
              alt=""
            />
            <text>会员中心</text></view
          >
        </view>
        <view
          class="item"
          style="background: #f7d1d1; color: #744c35"
          @click="toUrl('/pages/ucenter/task/task')"
        >
          <view style="display: flex; align-items: center">
            <image
              style="width: 35rpx; height: 36rpx; margin-right: 10rpx"
              src="/static/image/date.png"
              alt=""
            />
            <text>任务中心</text></view
          >
        </view>
      </view> -->
    </view>
    <view style="background: #fff; border-radius: 8px">
      <view
        style="
          display: flex;
          justify-content: space-between;
          margin-bottom: 15px;
          margin-top: 10px;
          padding: 24rpx 30rpx 0 24rpx;
        "
      >
        <view>
          <image
            src="../images/love.png"
            style="width: 30rpx; height: 28rpx"
          ></image>
          <text
            style="
              font-weight: 500;
              margin-left: 10rpx;
              color: #000;
              font-size: 18px;
            "
            >猜您喜欢</text
          >
        </view>
        <!-- <u-icon
          label="更多"
          labelPos="left"
          size="12px"
          labelSize="12px"
          name="arrow-right"
          top="1px"
          @click="$u.route('/pages/newest/newest')"
        ></u-icon> -->
      </view>
      <scroll-view
        :scroll-x="true"
        :show-scrollbar="false"
        style="
          white-space: nowrap;
          width: calc(100% - 48rpx);
          padding: 0 24rpx 30rpx 24rpx;
        "
      >
        <view
          v-for="(item, index) in new_list"
          :key="index"
          style="margin-right: 16rpx; width: 176rpx; display: inline-block"
          @click="get_detail(item.id)"
        >
          <u-image
            width="100%"
            height="90px"
            radius="5"
            :src="item.pic"
            :lazy-load="true"
            :class="[['tag1', 'tag3', 'tag2'][+item.pay]]"
          >
            <view slot="error" style="font-size: 24rpx">加载失败</view>
          </u-image>
          <view
            class="ellipsis"
            style="font-size: 28rpx; width: 100%; margin: 12rpx 0 6rpx 0"
          >
            {{ item.name }}
          </view>
          <view
            style="font-size: 22rpx; font-family: Helvetica; color: #999999"
          >
            {{ item.author }}
          </view>
        </view></scroll-view
      >
      <!-- <view
        style="
          flex-wrap: nowrap;
          padding: 0 24rpx 30rpx 24rpx;
          overflow: auto;
          display: flex;
          width: calc(100% - 48rpx);
        "
      >
        <view
          v-for="(item, index) in new_list"
          :key="index"
          style="flex: 1; margin-right: 16rpx; width: 176rpx"
          @click="get_detail(item.id)"
        >
          <u-image
            width="100%"
            height="90px"
            radius="5"
            :src="item.pic"
            :lazy-load="true"
            :class="[['tag1', 'tag3', 'tag2'][+item.pay]]"
          >
            <view slot="error" style="font-size: 24rpx">加载失败</view>
          </u-image>
          <u--text
            :lines="2"
            :text="item.name"
            margin="10px 0 3px 0"
            style="font-size: 28rpx; line-height: 34rpx"
          ></u--text>
        </view>
      </view> -->
    </view>
    <view
      style="
        background: #fff;
        border-radius: 24rpx 24rpx 0 0;
        padding-bottom: 30rpx;
      "
    >
      <view
        style="
          display: flex;
          justify-content: space-between;
          margin: 0 24rpx;
          padding-top: 24rpx;
          margin-top: 53rpx;
          align-items: center;
        "
      >
        <view style="display: flex; align-items: center">
          <image
            src="../images/vip.png"
            style="width: 32rpx; height: 30rpx"
          ></image>
          <text
            style="
              font-weight: 500;
              margin-left: 10rpx;
              color: #000;
              font-size: 18px;
            "
            >会员专享</text
          >
        </view>
        <u-icon
          label="更多"
          labelPos="left"
          size="12px"
          labelSize="12px"
          name="arrow-right"
          top="1px"
          @click="chakangengduo('vip')"
        ></u-icon>
      </view>
      <view
        class="lists"
        style="
          display: flex;
          flex-wrap: wrap;
          margin: 0 24rpx;
          justify-content: space-between;
        "
      >
        <view
          v-for="(item, index) in vipList.slice(0, 6)"
          :key="index"
          style="width: 48%; display: flex; margin-top: 24rpx"
          @click="get_detail(item.id)"
        >
          <u-image
            width="120rpx"
            height="162rpx"
            radius="8"
            :src="item.pic"
            :lazy-load="true"
            :class="[['tag1', 'tag3', 'tag2'][+item.pay]]"
          >
            <view slot="error" style="font-size: 24rpx">加载失败</view>
          </u-image>
          <view style="margin-left: 16rpx">
            <u--text :lines="1" :text="item.name"></u--text>
            <u--text
              :lines="1"
              :text="item.author"
              margin="0 0 15px 0"
              size="12"
              color="#999"
            ></u--text>
          </view>
        </view>
      </view>
    </view>
    <view style="background: #fff; border-radius: 24rpx 24rpx 0 0">
      <view
        style="
          display: flex;
          justify-content: space-between;
          margin: 0 24rpx;
          padding-top: 24rpx;
          margin-bottom: 28rpx;
          margin-top: 53rpx;
          align-items: center;
        "
      >
        <view style="display: flex; align-items: center">
          <image
            src="../images/hot.png"
            style="width: 29rpx; height: 38rpx"
          ></image>
          <text
            style="
              font-weight: 500;
              margin-left: 10rpx;
              color: #000;
              font-size: 18px;
            "
            >热门推荐</text
          >
        </view>
        <u-icon
          label="更多"
          labelPos="left"
          size="12px"
          labelSize="12px"
          name="arrow-right"
          top="1px"
          @click="chakangengduo()"
        ></u-icon>
      </view>
      <!-- <view @click="get_detail(hits_one.id)" style="margin: 0 24rpx">
        <u-image
          :src="hits_one.picx"
          width="100%"
          height="150px"
          radius="5"
          :lazy-load="true"
          :class="[['tag1', 'tag', 'tag2'][+hits_one.pay]]"
        >
          <view slot="error" style="font-size: 24rpx">加载失败</view>
        </u-image>
        <u--text
          :lines="1"
          :text="hits_one.name"
          margin="10px 0 3px 0"
        ></u--text>
        <u--text
          :lines="1"
          :text="hits_one.text"
          margin="0 0 15px 0"
          size="12"
          color="#616161"
        ></u--text>
      </view> -->
      <view
        class="lists"
        style="display: flex; flex-wrap: wrap; margin: 0 24rpx"
      >
        <view
          v-for="(item, index) in hits_list.slice(0, 6)"
          :key="index"
          style="width: 31%; margin-left: auto; margin-right: auto"
          @click="get_detail(item.id)"
        >
          <u-image
            width="100%"
            height="140px"
            radius="5"
            :src="item.pic"
            :lazy-load="true"
            :class="[['tag1', 'tag3', 'tag2'][+item.pay]]"
          >
            <view slot="error" style="font-size: 24rpx">加载失败</view>
          </u-image>
          <!-- <text class="c_title">{{ item.name }}</text> -->
          <u--text :lines="1" :text="item.name" margin="10px 0 3px 0"></u--text>
          <u--text
            :lines="1"
            :text="item.author"
            margin="0 0 15px 0"
            size="12"
            color="#616161"
          ></u--text>

          <!-- {{item}} -->
        </view>
      </view>
      <!-- <button
        @click="changehistList"
        style="
          background-color: #f7f7f7;
          border-radius: 44rpx;
          color: #999;
          height: 88rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <u-icon
          labelPos="left"
          labelSize="11"
          label="换一换"
          size="8"
          name="reload"
          top="1"
        ></u-icon>
      </button> -->
    </view>

    <view v-if="jx_data.length > 0">
      <view
        style="
          background-color: #fff;
          border-radius: 24rpx 24rpx 0px 0px;
          padding-bottom: 12px;
        "
      >
        <view
          style="
            display: flex;
            justify-content: space-between;
            margin: 0 24rpx;
            margin-bottom: 15px;
            margin-top: 52rpx;
            padding-top: 24rpx;
          "
        >
          <view>
            <image
              src="../images/fav.png"
              style="width: 30rpx; height: 34rpx"
            ></image>
            <text
              style="
                font-weight: 500;
                margin-left: 10rpx;
                color: #000;
                font-size: 18px;
              "
              >{{ jx_data[0].name }}</text
            >
          </view>
          <!-- <u-icon
            label="更多"
            labelPos="left"
            size="12px"
            labelSize="12px"
            name="arrow-right"
            top="1px"
            @click="chakangengduo(jx_data[0].id)"
          ></u-icon> -->
        </view>
        <view
          class="lists"
          style="
            display: flex;
            justify-content: space-between;
            width: calc(100% - 24px);
            margin: 0 auto;
            margin-bottom: 30rpx;
          "
        >
          <view
            v-for="(item, index) in jx_data[0].comic.slice(0, 3)"
            :key="index"
            style="width: 176rpx"
            @click="get_detail(item.id)"
          >
            <u-image
              width="100%"
              height="252rpx"
              radius="8"
              :src="item.pic"
              :lazy-load="true"
              :class="[['tag1', 'tag3', 'tag2'][+item.pay]]"
            >
              <view slot="error" style="font-size: 24rpx">加载失败</view>
            </u-image>
            <u--text
              :lines="1"
              style="justify-content: center"
              :text="item.name"
              size="14px"
              margin="6px 0 3px 0"
            ></u--text>
          </view>
        </view>
        <view
          v-for="item in jx_data[0].comic.slice(3, 6)"
          style="
            width: calc(100% - 48rpx);
            margin: 0 auto;
            display: flex;
            margin-bottom: 12px;
          "
        >
          <u-image
            width="140rpx"
            height="200rpx"
            radius="8"
            :src="item.pic"
            :lazy-load="true"
            :class="[['tag1', 'tag3', 'tag2'][+item.pay]]"
          >
            <view slot="error" style="font-size: 24rpx">加载失败</view>
          </u-image>
          <view
            style="
              display: flex;
              flex-direction: column;
              margin-left: 16rpx;
              flex: 1;
            "
          >
            <text style="font-size: 28rpx">{{ item.name }}</text>
            <text
              class="ellipsis"
              style="font-size: 24rpx; color: #999999; margin: 10rpx 0"
              >{{ item.text }}</text
            >
            <text style="font-size: 24rpx; color: #999999">{{
              item.author
            }}</text>
          </view>
        </view>
      </view></view
    >

    <view
      style="
        padding-bottom: 24rpx;
        background-color: #fff;
        border-radius: 24px 24px 0px 0px;
        margin-top: 24rpx;
      "
    >
      <view
        style="
          display: flex;
          justify-content: space-between;
          height: 99rpx;
          align-items: center;
          margin: 0 24rpx;
        "
      >
        <view style="display: flex; align-items: center">
          <image
            src="../images/top.png"
            style="width: 30rpx; height: 30rpx; margin-right: 12rpx"
          ></image>
          <text
            style="
              font-size: 32rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              color: #333333;
              line-height: 45rpx;
            "
            >排行榜TOP10</text
          >
        </view>
        <!-- <u-icon
          label="更多"
          labelPos="left"
          size="12px"
          labelSize="12px"
          name="arrow-right"
          top="1px"
          @click="$u.route('/pages/newest/newest')"
        ></u-icon> -->
      </view>
      <view
        style="
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          margin: 0 24rpx;
        "
      >
        <view
          style="display: flex; flex-direction: column; margin-bottom: 24rpx"
          :style="{
            width: index === 0 ? '100%' : undefined,
          }"
          @click="get_detail(item.id)"
          v-for="(item, index) in weekTop.slice(0, 5)"
        >
          <image
            style="border-radius: 16rpx"
            mode="aspectFill"
            :style="{
              width: index === 0 ? '100%' : '300rpx',
              height: index === 0 ? '272rpx' : '300rpx',
            }"
            :class="['top-item', ['bg-top1', 'bg-top2', 'bg-top3'][index]]"
            :src="item.pic"
          ></image>
          <text
            style="
              position: absolute;
              transform: rotate(-45deg);
              font-size: 32rpx;
              font-family: Helvetica;
              color: #ffffff;
              line-height: 32rpx;
              margin-top: 26rpx;
            "
            >{{ "NO." + (index + 1) }}</text
          >
          <view
            style="
              display: flex;
              flex-direction: column;
              justify-content: center;
              margin-top: 12rpx;
            "
          >
            <text
              style="
                margin-bottom: 6rpx;
                font-size: 28rpx;
                color: #000000;
                line-height: 34rpx;
              "
            >
              {{ item.name }}
            </text>
            <text
              class="ellipsis"
              style="
                font-size: 22rpx;
                color: rgba(153, 153, 153, 1);
                line-height: 26rpx;
              "
              :style="{
                width: index === 0 ? '100%' : '300rpx',
              }"
            >
              {{ item.text }}
            </text>
          </view>
        </view>
      </view>
    </view>
    <!-- <view style="margin-left: 30rpx; margin-right: 30rpx">
        <view
          style="
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            margin-top: 10px;
          "
        >
          <text
            style="
              font-weight: 500;
              margin-left: 10rpx;
              color: #000;
              font-size: 18px;
            "
            >猜你喜欢</text
          >
        </view>
        <view class="lists" style="display: flex; flex-wrap: wrap">
          <view
            v-for="(item, index) in love_list"
            :key="index"
            style="
              width: 48%;
              margin-left: auto;
              margin-right: auto;
              margin-bottom: 8px;
            "
            @click="get_detail(item.id)"
          >
            <view style="position: relative">
              <u-image
                width="100%"
                height="100%"
                mode="widthFix"
                radius="5"
                :src="item.pic"
                :lazy-load="true"
              >
                <view slot="error" style="font-size: 24rpx">加载失败</view>
              </u-image>
              <view
                style="position: absolute; bottom: 8px; left: 5px; z-index: 2"
              >
                <text
                  style="
                    color: #ffffff;
                    font-size: 11px;
                    background-color: rgba(255, 85, 0, 0.8);
                    padding: 2px 8px 2px 8px;
                    border-radius: 50px;
                  "
                  >{{ item.hits }}人气</text
                >
                <u--text
                  :lines="1"
                  :text="item.name"
                  style="
                    text-shadow: #000000 2px 2px 8px;
                    margin-top: 3px;
                    margin-bottom: 3px;
                  "
                  size="14"
                  bold
                  color="#ffffff"
                ></u--text>
                <u--text
                  :lines="1"
                  :text="item.text"
                  style="text-shadow: #000000 3px 4px 5px"
                  size="12"
                  color="#ffffff"
                ></u--text>
              </view>
            </view>
          </view>
        </view>
      </view> -->
  </view>
</template>
<script>
import appUpdate from "@/components/yzhua006-update/app-update.vue";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
import w_md5 from "../../../js_sdk/zww-md5/w_md5.js";

import wButton from "@/components/watch-login/watch-button.vue"; //button
export default {
  components: {
    w_md5,
    wButton,
  },
  mounted() {
    this.index_data();
  },
  data() {
    return {
      downOption: {
        auto: true, // 不自动加载 (mixin已处理第一个tab触发downCallback)
        inOffsetRate: 0.4,
        minAngle: 60,
      },
      vipList: [],
      upOption: {
        auto: false, // 不自动加载
        onScroll: false,
        textNoMore: "没有更多了",
        use: false,
        // page: {
        // 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
        // 	size: 10 // 每页数据的数量
        // },
        noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
        empty: {
          use: false,
          tip: "~ 网络不佳 ~", // 提示
          btnText: "刷新",
        },
        toTop: {
          // 回到顶部按钮,需配置src才显示
          // src: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-fc0da29a-7f60-4d5e-92de-6d664018ab77/d27c3887-1994-46fc-b816-5b88d40493ac.png", // 图片路径
          src: "/static/image/mkz_pic_detail_nlhd.png",
          offset: 1000, // 列表滚动多少距离才显示回到顶部按钮,默认1000
          duration: 300, // 回到顶部的动画时长,默认300ms (当值为0或300则使用系统自带回到顶部,更流畅; 其他值则通过step模拟,部分机型可能不够流畅,所以非特殊情况不建议修改此项)
          zIndex: 9990, // fixed定位z-index值
          left: null, // 到左边的距离, 默认null. 此项有值时,right不生效. (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
          right: 20, // 到右边的距离, 默认20 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
          bottom: 120, // 到底部的距离, 默认120 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
          safearea: false, // bottom的偏移量是否加上底部安全区的距离, 默认false, 需要适配iPhoneX时使用 (具体的界面如果不配置此项,则取mescroll组件props的safearea值)
          width: 72, // 回到顶部图标的宽度, 默认72 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
          radius: "50%", // 圆角, 默认"50%" (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
        },
      },
      list: [1, 2, 3, 4, 5, 6], //列表数据
      nav_color: "rgba(0,0,0,0)",
      search_bgColor: "rgba(0,0,0,0.2)",
      search_color: "#fff",
      inactiveStyle: { color: "#ffffff" },
      activeStyle: {
        color: "#ffffff",
        "font-size": "18px",
        "font-weight": "500",
      },
      grid_list: [
        {
          icon: "/static/menu/mkz_ic_home_ph.png",
          name: "排行榜",
        },
        {
          icon: "/static/menu/mkz_ic_home_vip.png",
          name: "会员中心",
        },
        // {
        // 	icon:'/static/menu/mkz_ic_home_novel.png',
        // 	name:'小说'
        // },
        {
          icon: "/static/menu/mkz_ic_home_novel.png",
          name: "随看",
        },
        {
          icon: "/static/menu/mkz_ic_home_sd.png",
          name: "分类",
        },
        {
          icon: "/static/menu/mkz_ic_home_sc.png",
          name: "充值",
        },
      ],
      gj_loading: true,
      lunbo_loading: true,
      time: "",
      token: "",
      app_key: "",
      websiteUrl: "",
      utoken: "",
      statusHeight: 0,
      hits_list: [],
      hits_one: {},
      lunbo_list: [],
      new_list: [],
      jx_data: [], //APP精选必看内容,显示6个
      love_list: [],
      love_page_num: 1,
      today_page_num: 1,
      weekTop: [],
      update_data: [],
      nums: 0, //数据量
    };
  },
  props: {
    i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
    index: {
      // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
      type: Number,
      default() {
        return 0;
      },
    },
    tabs: {
      // 为了请求数据,演示用,可根据自己的项目判断是否要传
      type: Array,
      default() {
        return [];
      },
    },
    height: [Number, String], // mescroll的高度
    up_nav_status: {
      type: Boolean,
      default: false,
    },
    up_nav_height: {
      type: String,
      default: "80px",
    },
  },
  methods: {
    //"重试"后，无网络触发
    disconnected() {
      console.log("disconnected");
    },
    toUrl(url) {
      this.utoken = uni.getStorageSync("user");
      if (this.utoken) {
        uni.navigateTo({
          url,
        });
      } else {
        uni.navigateTo({
          url: "/pages/login/login",
        });
      }
    },
    //"重试"后，有网络触发
    connected() {
      console.log("connected");
      this.mescroll.triggerDownScroll();
    },
    //用户点击页面的"重试"按钮时触发
    retry() {
      console.log("retry");
    },
    scroll(e) {
      // this.mescroll.lockUpScroll(true)
      // console.log('当前滚动条的位置:' + e.scrollTop + ', 是否向上滑:'+e.isScrollUp)
      if (this.i == 0) {
        if (e.isScrollUp) {
          if (e.scrollTop > 28) {
            this.$emit("myEvent", true);
          }
        } else {
          if (e.scrollTop < 28) {
            this.$emit("myEvent", false);
          }
        }
      }
    },
    click() {},
    toLogin() {
      this.utoken = uni.getStorageSync("user");
      if (this.utoken == "") {
        uni.navigateTo({
          url: "../login/login",
        });
      } else {
        uni.navigateTo({
          url: "../ucenter/vip/vip",
        });
      }
    },
    click_tab(item) {
      console.log("item", item);
    },
    chakangengduo(type) {
      // getApp().globalData.tabId = id;
      if (type === "vip") {
        getApp().globalData.isVip = true;
      }
      uni.switchTab({
        url: "../class/class",
      });
    },
    imageError: function (e, index) {
      // console.error('image发生error事件，携带值为' + e.detail.errMsg)
      this.new_list[index]["cover_url"] = "../../static/img_error.jpg";
    },
    search() {
      uni.navigateTo({
        url: "../search/search",
      });
    },
    more_click() {
      uni.navigateTo({
        url: "../class/class",
      });
    },
    grid_click(index) {
      this.utoken = uni.getStorageSync("user");
      console.log(index);
      if (index == 0) {
        uni.navigateTo({
          url: "../ranking/ranking",
        });
      }
      if (index == 1) {
        if (this.utoken == "") {
          uni.navigateTo({
            url: "../login/login",
          });
        } else {
          uni.navigateTo({
            url: "../ucenter/vip/vip",
          });
        }
      }
      // if(index==2){
      // 	uni.navigateTo({
      // 		url:'../book/index/index'
      // 	})
      // }
      if (index == 2) {
        this.get_detail(uni.$u.random(1, this.nums));
        // uni.navigateTo({
        // 	url:'../newest/newest'
        // })
      }
      if (index == 3) {
        uni.switchTab({
          url: "/pages/class/class",
        });
      }
      if (index == 4) {
        if (this.utoken == "") {
          uni.navigateTo({
            url: "../login/login",
          });
        } else {
          uni.navigateTo({
            url: "../ucenter/coin/coin",
          });
        }
      }
    },
    lunbo_click(index) {
      this.get_detail(this.lunbo_list[index].id);
    },
    get_detail(id) {
      console.log(id);
      uni.navigateTo({
        url: "../detail/detail?id=" + id,
      });
    },
    req_index() {
      this.utoken = uni.getStorageSync("user");
      var _this = this;
      // #ifdef H5
      console.log("h5");
      getApp().globalData.deviceid = uni.$u.guid(10);
      console.log(getApp().globalData.deviceid);
      _this.index_data();
      _this.love_data();
      // #endif
      // #ifndef H5
      console.log("非h5");
      uni.getSystemInfo({
        success: function (res) {
          getApp().globalData.facility = res.platform; //ios  or android
          console.log("手机系统信息", getApp().globalData.facility);
        },
      });
      if (getApp().globalData.facility == "ios") {
        plus.device.getInfo({
          success: function (e) {
            getApp().globalData.deviceid = e.uuid;
            console.log(getApp().globalData.deviceid);
            _this.index_data();
            _this.love_data();
            _this.$refs.app_update.update();
          },
          fail: function (e) {
            console.log(e);
          },
        });
      } else {
        getApp().globalData.facility = "android";
        plus.device.getAAID({
          success: function (e) {
            getApp().globalData.deviceid = e.aaid;
            if (getApp().globalData.deviceid == "") {
              // getApp().globalData.deviceid = "asawsdqwefwsnjfiowehnfjuoweisfnuj"
              getApp().globalData.deviceid = uni.$u.guid(10);
            }
            console.log(getApp().globalData.deviceid);
            _this.index_data();
            _this.love_data();
            _this.$refs.app_update.update();
          },
          fail: function (e) {
            console.log(e);
            plus.device.getInfo({
              success: (res) => {
                getApp().globalData.deviceid = res.uuid.split(",")[0];
                console.log(getApp().globalData.deviceid);
                _this.index_data();
                _this.love_data();
                _this.$refs.app_update.update();
              },
              fail: function (res) {
                plus.device.getOAID({
                  success: function (r) {
                    getApp().globalData.deviceid = r.oaid;
                    console.log("getOAID success: " + JSON.stringify(r));
                    _this.index_data();
                    _this.love_data();
                    _this.$refs.app_update.update();
                  },
                  fail: function (r) {
                    console.log("getOAID failed: " + JSON.stringify(r));
                  },
                });
              },
            });
          },
        });
      }
      // #endif
    },
    index_data() {
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;

      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&reco_size=7&timestamp=" +
        time;
      // console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",param)
      var sign = w_md5.hex_md5_32Upper(param + this.app_key);

      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/comic/index?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log(res.data);
          this.hits_list = res.data.data.reco;
          this.weekTop = res.data.data.weektop;
          this.hits_one = this.hits_list[0];
          this.vipList = res.data.data.vip_list;
          // this.hits_list.shift(); //删除数组第一个元素
          this.lunbo_list = res.data.data.banner;
          this.new_list = res.data.data.love_list;
          this.jx_data = res.data.data.class;
          this.lunbo_loading = false;

          setTimeout(() => {
            this.gj_loading = false;
            this.$emit("load");
          }, 1000);
          // uni.stopPullDownRefresh()
          setTimeout(() => {
            // console.log('dsadas');
            this.$emit("myLoad", true);
          }, 500);
        },
      });
    },
    love_data() {
      this.love_page_num = 1;
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;

      var param =
        "cid=0&deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&page=" +
        this.love_page_num +
        "&pay=0&size=10&sort=hits&state=0&timestamp=" +
        time;
      var sign = w_md5.hex_md5_32Upper(param + this.app_key);

      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/comic/data?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log(res.data);
          this.love_list = res.data.list;
          this.nums = res.data.nums;
          // uni.stopPullDownRefresh()
        },
      });
    },
    love_data_more() {
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;

      var param =
        "cid=0&deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&page=" +
        this.love_page_num +
        "&pay=0&size=10&sort=hits&state=0&timestamp=" +
        time;
      var sign = w_md5.hex_md5_32Upper(param + this.app_key);

      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/comic/data?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log(res.data);
          this.love_list = this.love_list.concat(res.data.list);
          // uni.stopPullDownRefresh()
          this.mescroll.endSuccess(res.data.list.length);
        },
      });
    },
    today_data() {
      this.today_page_num = 1;
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;

      var param =
        "cid=0&deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&page=" +
        this.today_page_num +
        "&pay=0&size=10&sort=addtime&state=0&timestamp=" +
        time;
      var sign = w_md5.hex_md5_32Upper(param + this.app_key);

      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/comic/data?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log(res.data);
          this.update_data = res.data.list;
          // uni.stopPullDownRefresh()
          this.mescroll.endSuccess();
        },
      });
    },
    today_data_more() {
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;

      var param =
        "cid=0&deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&page=" +
        this.today_page_num +
        "&pay=0&size=10&sort=addtime&state=0&timestamp=" +
        time;
      var sign = w_md5.hex_md5_32Upper(param + this.app_key);

      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/comic/data?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log(res.data);
          this.update_data = this.update_data.concat(res.data.list);
          // uni.stopPullDownRefresh()
          this.mescroll.endSuccess(res.data.list.length);
        },
      });
    },
    /*下拉刷新的回调 */
    downCallback() {
      let _this = this;
      uni.getNetworkType({
        success: function (res) {
          console.log(res.networkType);
          if (res.networkType == "none") {
            _this.mescroll.endErr();
            return;
          }
        },
      });

      this.utoken = uni.getStorageSync("user");
      if (getApp().globalData.deviceid == "") {
        this.req_index();
        return;
      }
      if (getApp().globalData.facility == "") {
        this.req_index();
        return;
      } else {
        // 这里加载你想下拉刷新的数据, 比如刷新轮播数据
        // loadSwiper();
        if (this.i == 0) {
          this.index_data();
          this.love_data();
        } else {
          // console.log("=========================")
          this.today_data();
        }
        // 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
        this.mescroll.resetUpScroll();
      }
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      //联网加载数据
      if (this.i == 0) {
        this.love_page_num = this.love_page_num + 1;
        this.love_data_more();
        // this.mescroll.endUpScroll(true)
        // this.index_data()
      } else {
        this.today_page_num = this.today_page_num + 1;
        // console.log("=========================")
        this.today_data_more();
      }
    },
    //点击空布局按钮的回调
    emptyClick() {
      uni.showToast({
        title: "点击了按钮,具体逻辑自行实现",
      });
    },
    changehistList() {
      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&reco_size=7&timestamp=" +
        new Date().getTime();
      var sign = w_md5.hex_md5_32Upper(param + this.app_key);
      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/comic/index?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          this.hits_list = res.data.data.reco;
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.item {
  display: flex;
  width: 208rpx;
  height: 65rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: 500;
  align-items: center;
  justify-content: center;
}
.tag3 {
  position: relative;
  &::after {
    content: "";
    // padding: 5rpx 12rpx 5rpx 12rpx;
    position: absolute;
    width: 80rpx;
    height: 34rpx;
    top: 0rpx;
    left: 0rpx;
    background-image: url("../../class/images/no-free.png");
    background-size: 100% 100%;
    border-radius: 15rpx;
    font-size: 16rpx;
    color: #000000;
    text-align: center;
  }
}
.tag1 {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    width: 80rpx;
    height: 34rpx;
    background-image: url("../../class/images/free.png");
    background-size: 100% 100%;
    top: 0rpx;
    border-radius: 15rpx;
    font-size: 16rpx;
    color: #000000;
    text-align: center;
  }
}
.tag2 {
  position: relative;
  &::after {
    content: "VIP";
    padding: 5rpx 20rpx 5rpx 20rpx;
    position: absolute;
    left: 0rpx;
    background: linear-gradient(223deg, #fdf37d 0%, #f2b040 100%);
    border-radius: 15rpx;
    font-size: 22rpx;
    color: #000000;
    text-align: center;
  }
}
.ellipsis {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 溢出部分显示省略号 */
  width: 50%;
}
.top-item {
  position: relative;
  &::after {
    position: absolute;
    content: "";
    color: #ffffff;
    width: 130rpx;
    height: 130rpx;
    left: 0;
    top: 0;
    background-color: #e97476;
    clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
  }
}
.bg-top1 {
  &::after {
    background-color: #f19e3f;
  }
}
.bg-top2 {
  &::after {
    background-color: #3fbcf1;
  }
}
.bg-top3 {
  &::after {
    background-color: #e974ab;
  }
}
</style>
